<html>

<head>
    <title>智慧党建在线会议</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no">
    <link rel="stylesheet" href="__PUBLIC__/tencent_stream_sdk/css/bootstrap-material-design.min.css">
    <link rel="stylesheet" href="__PUBLIC__/tencent_stream_sdk/css/index.css">
    <link rel="stylesheet" href="__PUBLIC__/tencent_stream_sdk/css/room.css">
    <link rel="stylesheet" href="__PUBLIC__/plugins/layui/css/layui.css">
    <style>
        /*member-list-box的滚动条样式*/
        .member-list-box::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .member-list-box::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 5px;
        }
        .member-list-box::-webkit-scrollbar-track {
            background: #fff;
            border-radius: 5px;
        }
        .file_list::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .file_list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 5px;
        }
        .file_list::-webkit-scrollbar-track {
            background: #fff;
            border-radius: 5px;
        }
        .file_list {
            overflow-y: scroll;
            width: 280px;
            margin: 0 10px;
            align-items: flex-start;
            margin-top: 10px;
            height: 156px
        }
        .file_list .attachment{
            cursor: pointer;
        }
        .file_list .attachment:hover{
            text-decoration: underline;
        }

        .layui-layer-dialog {
            display: block;
        }

        #main-iframe{
            display: none;
            justify-content: flex-end;
            grid-area: 1/1/4/8;
            box-sizing: border-box;
            padding: 10px;
        }

        #main-video{
            box-sizing: border-box;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="root">
        <!-- 登录页面 -->
        <div id="login-root">
            <!-- 登录卡片 -->
            <div id="login-card" class="card">
                <!-- 顶部三个蓝条 -->
                <div class="row-div" style="width: 100%; height: 10px">
                    <div style="width: 190px; height: 100%; background-color: #006EFF"></div>
                    <div style="width: 160px; height: 100%; background-color: #00A4FF"></div>
                    <div style="width: 100px; height: 100%; background-color: #5AD5E0"></div>
                </div>
                <!-- 腾讯云logo -->
                <div class="row-div" style="width: 100%; height: 100px; justify-content: center">
<!--                    <img style="height: 23px" src="__PUBLIC__/tencent_stream_sdk/img/logo.png" alt="">-->
<!--                    <div style="width: 9px"></div>-->
<!--                    <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div>-->
<!--                    <div style="width: 9px"></div>-->
                    <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">在线会议</div>
                </div>
                <!-- 用户名 房间号 登录按钮-->
                <div class="col-div" style="width: 320px">
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="userId" class="bmd-label-floating">用户名:</label>
                        <input type="text" class="form-control" name="userId" id="userId" maxlength="18" value="{$user.username}" readonly>
                    </div>
                    <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px">
                        <label for="roomId" class="bmd-label-floating">会议房间号:</label>
                        <input type="text" class="form-control" name="roomId" id="roomId" maxlength="18" value="{$meeting.id}" readonly>
                    </div>
                    <div style="height: 24px"></div>
                    <!-- 登录 -->
                    <button id="login-btn" type="button" class="btn btn-raised btn-primary"
                        style="width: 100%; height: 40px">进入房间
                        <div class="ripple-container"></div>
                    </button>
                    <!-- 摄像头 麦克风 -->
                    <div class="row-div" style="width: 100%; height: 105px; justify-content: center">
<!--                        <img id="camera" style="height: 27px" src="__PUBLIC__/tencent_stream_sdk/img/camera.png" onClick="event.cancelBubble = true"-->
<!--                            data-toggle="popover" data-placement="top" title="" data-content="">-->
                        <!-- 选择摄像头 -->
<!--                        <div id="camera-option" style="display: none"></div>-->
<!--                        <div style="width: 100px"></div>-->
                        <img id="microphone" style="height: 27px" src="__PUBLIC__/tencent_stream_sdk/img/mic.png"
                            onClick="event.cancelBubble = true" data-toggle="popover" data-placement="top" title=""
                            data-content="">
                        <!-- 选择麦克风 -->
                        <div id="mic-option" style="display: none"></div>
                    </div>
                    <!-- 设备检测按钮 -->
                    <div id="device-testing-btn" class="device-testing-btn">
                        <div class="device-icon">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-device"></use>
                            </svg>
                        </div>
                        设备检测
                    </div>
                    <div id="device-connect-list" class="device-connect-list" style="display: none;">
<!--                        <div id="connect-camera" class="connect icon-normal">-->
<!--                            <svg class="icon" aria-hidden="true">-->
<!--                                <use xlink:href="#icon-cameraIcon"></use>-->
<!--                            </svg>-->
<!--                        </div>-->
                        <div id="connect-voice"  class="connect icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-voice"></use>
                            </svg>
                        </div>
                        <div id="connect-mic" class="connect icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-microphone"></use>
                            </svg>
                        </div>
                        <div id="connect-network" class="connect icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-network"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 设备检测界面弹窗 -->
        <div id="device-testing-root" style="display: none;">
            <!-- 设备检测卡片 -->
            <div class="device-testing-card">
                <!-- 设备检测准备界面 -->
                <div id="device-testing-prepare" class="device-testing-prepare">
                    <div class="testing-title">设备连接</div>
<!--                    <div class="testing-prepare-info">设备检测前请务必给当前页面开放摄像头，麦克风权限哦~</div>-->
                    <div class="testing-prepare-info">设备检测前请务必给当前页面开放麦克风权限哦~</div>
                    <div class="device-display">
<!--                        <div id="device-camera" class="device icon-normal">-->
<!--                            <svg class="icon" aria-hidden="true">-->
<!--                                <use xlink:href="#icon-cameraIcon"></use>-->
<!--                            </svg>-->
<!--                        </div>-->
                        <div id="device-voice"  class="device icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-voice"></use>
                            </svg>
                        </div>
                        <div id="device-mic" class="device icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-microphone"></use>
                            </svg>
                        </div>
                        <div id="device-network" class="device icon-normal">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-network"></use>
                            </svg>
                        </div>
                    </div>
                    <div id="device-loading" class="loading-background">
                        <div class="device-loading"></div>
                    </div>
                    <!-- 连接结果提示 -->
                    <div class="connect-info">
                        <!-- 连接结果 -->
                        <div id="connect-info" style="max-width: 60%;"></div>
                        <!-- 错误icon及错误解决指引 -->
                        <div id="connect-attention-container" class="connect-attention-container" style="display: none;">
                            <div id="connect-attention-icon" class="connect-attention-icon">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-warn"></use>
                                </svg>
                            </div>
                            <div id="connect-attention-info" class="connect-attention-info" style="display: none;">
                            </div>
                        </div>
                    </div>
                    <!-- 设备连接页面button -->
                    <div class="testing-btn-display">
                        <div id="start-test-btn" class="test-btn start-test start-gray">开始检测</div>
                        <div id="connect-again-btn" class="test-btn connect-again" style="display: none;">重新连接</div>
                    </div>
                </div>
                <!-- 设备检测tab页 -->
                <div id="device-testing" class="device-testing" style="display: none;">
                    <div class="device-testing-title">
<!--                        <div id="camera-testing" class="testing icon-gray">-->
<!--                            <svg class="icon" aria-hidden="true">-->
<!--                                <use xlink:href="#icon-cameraIcon"></use>-->
<!--                            </svg>-->
<!--                        </div>-->
                        <div id="voice-testing" class="testing icon-gray">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-voice"></use>
                            </svg>
                        </div>
                        <div id="mic-testing" class="testing icon-gray">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-microphone"></use>
                            </svg>
                        </div>
                        <div id="network-testing" class="testing icon-gray">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-network"></use>
                            </svg>
                        </div>
                    </div>
                    <!-- 设备检测-摄像头检测 -->
<!--                    <div id="camera-testing-body" class="testing-body" style="display: none;">-->
<!--                        <div class="device-list camera-device-list">-->
<!--                            <div class="select-title" style="display: block;">摄像头选择</div>-->
<!--                            <div class="select-list" style="display: block;">-->
<!--                                <select name="select" id="camera-select" class="device-select"></select>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div id="camera-video" class="camera-video"></div>-->
<!--                        <div class="testing-info-container">-->
<!--                            <div class="testing-info">是否可以清楚的看到自己？</div>-->
<!--                            <div class="button-list">-->
<!--                                <div id="camera-fail" class="fail-button">看不到</div>-->
<!--                                <div id="camera-success" class="success-button">可以看到</div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <!-- 设备检测-播放器检测 -->
                    <div id="voice-testing-body" class="testing-body" style="display: none;">
                        <div class="device-list camera-device-list">
                            <div class="select-title" style="display: block;">扬声器选择</div>
                            <div class="select-list" style="display: block;">
                                <select name="select" id="voice-select" class="device-select"></select>
                            </div>
                        </div>
                        <div class="audio-control">
                            <div class="audio-control-info">请调高设备音量, 点击播放下面的音频试试～</div>
                            <audio id="audio-player" src="https://web.sdk.qcloud.com/trtc/webrtc/assets/bgm-test.mp3" controls></audio>
                        </div>
                        <div class="testing-info-container">
                            <div class="testing-info">是否可以听到声音？</div>
                            <div class="button-list">
                                <div id="voice-fail" class="fail-button">听不到</div>
                                <div id="voice-success" class="success-button">可以听到</div>
                            </div>
                        </div>
                    </div>
                    <!-- 设备检测-麦克风检测 -->
                    <div id="mic-testing-body" class="testing-body" style="display: none;">
                        <div class="device-list camera-device-list">
                            <div class="select-title" style="display: block;">麦克风选择</div>
                            <div class="select-list" style="display: block;">
                                <select name="select" id="mic-select" class="device-select"></select>
                            </div>
                        </div>
                        <div class="mic-testing-container">
                            <div class="mic-testing-info">对着麦克风说'哈喽'试试～</div>
                            <div id="mic-bar-container" class="mic-bar-container"></div>
                            <div id="audio-container"></div>
                        </div>
                        <div class="testing-info-container">
                            <div class="testing-info">是否可以看到音量图标跳动？</div>
                            <div class="button-list">
                                <div id="mic-fail" class="fail-button">看不到</div>
                                <div id="mic-success" class="success-button">可以看到</div>
                            </div>
                        </div>
                    </div>
                    <!-- 设备检测-硬件及网速检测 -->
                    <div id="network-testing-body" class="testing-body" style="display: none;">
                        <div class="testing-index-list">
                            <div class="testing-index-group">
                                <div class="testing-index">操作系统</div>
                                <div id="system"></div>
                            </div>
                            <div class="testing-index-group">
                                <div class="testing-index">浏览器版本</div>
                                <div id="browser"></div>
                            </div>
                            <!-- <div class="testing-index-group">
                                <div class="testing-index">IP地址</div>
                                <div id="ip"></div>
                            </div> -->
                            <div class="testing-index-group">
                                <div class="testing-index">屏幕共享能力</div>
                                <div id="screen-share"></div>
                            </div>
                            <div class="testing-index-group">
                                <div class="testing-index">网络延迟</div>
                                <div id="network-rtt" class="network-loading"></div>
                            </div>
                            <div class="testing-index-group">
                                <div class="testing-index">上行网络质量</div>
                                <div id="uplink-network" class="network-loading"></div>
                            </div>
                            <div class="testing-index-group">
                                <div class="testing-index">下行网络质量</div>
                                <div id="downlink-network" class="network-loading"></div>
                            </div>
                            <div class="testing-index-group">
                                <div class="testing-index">检测剩余时间</div>
                                <div id="count-down"></div>
                            </div>
                        </div>
                        <div class="testing-footer">
                            <div id="testing-report-btn" class="test-btn">查看检测报告</div>
                        </div>
                    </div>
                </div>
                <!-- 设备检测报告 -->
                <div id="device-testing-report" class="device-testing-report" style="display: none;">
                    <div class="testing-title">检测报告</div>
                    <!-- 检测报告内容 -->
                    <div class="device-report-list">
                        <!-- 摄像头报告信息 -->
<!--                        <div class="device-report camera-report">-->
<!--                            <div class="device-info">-->
<!--                                <div class="report-icon">-->
<!--                                    <svg class="icon" aria-hidden="true">-->
<!--                                        <use xlink:href="#icon-cameraIcon"></use>-->
<!--                                    </svg>-->
<!--                                </div>-->
<!--                                <div id="camera-name" class="device-name"></div>-->
<!--                            </div>-->
<!--                            <div id="camera-testing-result" class="camera-testing-result"></div>-->
<!--                        </div>-->
                        <!-- 扬声器报告信息 -->
                        <div id="voice-report" class="device-report voice-report">
                            <div class="device-info">
                                <div class="report-icon">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-voice"></use>
                                    </svg>
                                </div>
                                <div id="voice-name" class="device-name"></div>
                            </div>
                            <div id="voice-testing-result" class="voice-testing-result"></div>
                        </div>
                        <!-- 麦克风报告信息 -->
                        <div class="device-report mic-report">
                            <div class="device-info">
                                <div class="report-icon">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-microphone"></use>
                                    </svg>
                                </div>
                                <div id="mic-name" class="device-name"></div>
                            </div>
                            <div id="mic-testing-result" class="mic-testing-result"></div>
                        </div>
                        <!-- 网络报告信息 -->
                        <div class="device-report network-report">
                            <div class="device-info">
                                <div class="report-icon">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-network"></use>
                                    </svg>
                                </div>
                                <div id="network-name" class="device-name">网络延迟</div>
                            </div>
                            <div id="rtt-result" class="network-testing-result"></div>
                        </div>
                        <div class="device-report network-report">
                            <div class="device-info">
                                <div class="report-icon">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-network"></use>
                                    </svg>
                                </div>
                                <div id="etwork-name" class="device-name">上行网络质量</div>
                            </div>
                            <div id="uplink-network-quality-result" class="network-testing-result"></div>
                        </div>
                        <div class="device-report network-report">
                            <div class="device-info">
                                <div class="report-icon">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-network"></use>
                                    </svg>
                                </div>
                                <div id="network-name" class="device-name">下行网络质量</div>
                            </div>
                            <div id="downlink-network-quality-result" class="network-testing-result"></div>
                        </div>
                    </div>
                    <div class="device-report-footer">
                        <div id="testing-again" class="device-report-btn testing-agin">重新检测</div>
                        <div id="testing-finish" class="device-report-btn testing-finish">完成检测</div>
                    </div>
                </div>
                <!-- 设备检测关闭按钮 -->
                <div id="device-testing-close-btn" class="device-testing-close-btn">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-closeIcon"></use>
                    </svg>
                </div>
            </div>
        </div>
        <!-- 聊天室页面 -->
        <div id="room-root" class="col-div">
            <!-- header -->
            <div class="row-div card" style="width: 100%; height: 65px; justify-content: space-between">
                <!-- 腾讯云logo -->
                <div class="row-div" style="height: 100%; width: 530px; padding-left: 20px;">
<!--                    <img style="height: 23px" src="__PUBLIC__/tencent_stream_sdk/img/logo.png" alt="">-->
<!--                    <div style="width: 9px"></div>-->
<!--                    <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div>-->
<!--                    <div style="width: 9px"></div>-->
                    <div style=" height: 23px; font-size: 18px; color: #333333">{$meeting.theme}</div>
                </div>
                <!-- 分享屏幕 退出 按钮 -->
                <div class="row-div" style="height: 100%; width: auto;">
<!--                    <img id="screen-btn" style="width: 65px; height: 65px" src="__PUBLIC__/tencent_stream_sdk/img/screen-off.png" alt="">-->
<!--                    <div style="width: 20px"></div>-->
<!--                    <img id="logout-btn" style="width: 65px; height: 65px" src="__PUBLIC__/tencent_stream_sdk/img/logout.png" alt="">-->
                </div>
                <!-- 房间号 -->
                <div id="header-roomId"
                    style="width: 230px; justify-content: flex-end; padding-right: 20px; font-size: 14px; color: #888888">
                    会议房间号: 12345</div>
            </div>
            <!-- content -->
            <div class="row-div" style="height: 100%; width: 100%; padding: 10px">
                <!-- 视频网格 -->
                <div id="video-grid" style="height: 100%; flex: 1">
                    <!-- 主视频 -->
                    {if $config.is_share == 1}
                    <div id="main-video" class="video-box col-div" style="justify-content: flex-end;">
                        <div id="mask_main" class="mask col-div">
                            <!-- “摄像头未开启”遮罩 -->
                            <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8; top: 0; left: 0;"></div>
                            <img style="width: 63px; height: 69px; z-index: 10;" src="__PUBLIC__/tencent_stream_sdk/img/camera-max.png" alt="">
                            <div style="height: 10px"></div>
                            <div style="z-index: 10" class="tip">主持人未开启屏幕分享</div>
                        </div>
                    </div>
                    {else/}
                    <div id="main-video" class="video-box col-div" style="justify-content: flex-end;">
                        <div id="mask_main" class="mask col-div">
                            <!-- “摄像头未开启”遮罩 -->
                            <div style="height: 100%; width: 100%; position: absolute; background-color: #D8D8D8; top: 0; left: 0;"></div>
                            <img style="width: 63px; height: 69px; z-index: 10;" src="__PUBLIC__/tencent_stream_sdk/img/camera-max.png" alt="">
                            <div style="height: 10px"></div>
                            <div style="z-index: 10" class="tip">附件预览区域，点击左下角附件可在此预览</div>
                        </div>
                    </div>
                    <iframe id="main-iframe" name="main-iframe" class="video-box col-div" width="100%" height="100%" src="" frameborder="0" scrolling="no"></iframe>
                    {/if}
                    <!-- 主视频控制按钮 -->
                    <div class="card" style="padding: 0;display: flex;flex-direction: row;grid-area: 4/1/4/8;justify-content: space-between;background: #fff;margin: -10px 10px 0;">
                        <div id="main-video-btns" class="row-div"
                             style="width: 156px; z-index: 10; justify-content: start; align-self: flex-start">
                            <!--                            <img id="video-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"-->
                            <!--                                src="__PUBLIC__/tencent_stream_sdk/img/big-camera-on.png" alt="">-->
                            <img id="mic-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                 src="__PUBLIC__/tencent_stream_sdk/img/big-mic-on.png" alt="">
                            <!--屏幕分享,仅会议主持人显示-->
                            {if $config.is_share && $is_admin == 1}
                            <img id="screen-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                 src="__PUBLIC__/tencent_stream_sdk/img/screen-off.png" alt="">
                            {/if}
                        </div>
                        <div id="main-video-btns2" class="row-div"
                             style="width: 78px; z-index: 10; justify-content: center; align-self: flex-end">
                            <img id="logout-btn" style="width: 68px; height: 68px" onClick="event.cancelBubble = true"
                                 src="__PUBLIC__/tencent_stream_sdk/img/logout.png" alt="">
                        </div>
                    </div>
                    <!-- 小视频 -->
                </div>
                <div class="col-div" style="width: 340px; height: 100%; padding: 10px;padding-bottom: 0">
                    <div class="col-div card member-list-box" style="width: 100%;overflow-y: scroll;margin-bottom: 10px">
                        <!-- 管理人员列表 -->
                        <div class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
                            <div style="width: 100%; padding-left: 20px">
                                <div class="row-div member"
                                     style="width: 100%; height: 50px; justify-content: space-between">
                                    <div class="member-id">主持人: {$meeting.compere_user}</div>
                                    <div class="row-div" style="width:100px; height: 26px; justify-content: center">
                                    </div>
                                </div>
                            </div>
                            <div style="width: 100%; padding-left: 20px">
                                <div class="row-div member"
                                     style="width: 100%; height: 50px; justify-content: space-between;border-bottom: 0">
                                    <div class="member-id">记录人: {$meeting.recorder_user}</div>
                                    <div class="row-div" style="width:100px; height: 26px; justify-content: center">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-div card member-list-box" style="width: 100%; height: 50%;overflow-y: scroll;">
                        <!-- 成员列表 -->
                        <div id="member-list" class="col-div" style="width: 100%; justify-content: flex-start; flex: 1">
                            <!-- member -->
                            <div id="member-me" style="width: 100%; padding-left: 20px">
                                <div class="row-div member"
                                     style="width: 100%; height: 50px; justify-content: space-between">
                                    <div class="member-id">(我)</div>
                                    <div class="row-div" style="width:100px; height: 26px; justify-content: center">
<!--                                        <img class="member-video-btn" style="height: 100%" src="__PUBLIC__/tencent_stream_sdk/img/camera-on.png"-->
<!--                                             alt="">-->
                                        <div style="width: 18px"></div>
                                        <div style="width: 26px; height: 26px; display: inline-block; position: relative" class="mic-btn">
                                            <img class="member-audio-btn" style="width: 100%; height: 100%;" src="__PUBLIC__/tencent_stream_sdk/img/mic-on.png" alt="">
                                            <div class="volume-level" style="position: absolute; bottom: 0; left: 0; width: 28px; height: 0%; overflow: hidden; transition: height .1s ease;">
                                                <img style="position: absolute; bottom: 0;" alt="" src="__PUBLIC__/tencent_stream_sdk/img/mic-green.png">
                                            </div>
                                        </div>
                                        {if $is_admin == 1}
                                        <img id="kick-user" style="width: 24px; height: 24px;cursor: pointer;margin-left: 10px" src="__PUBLIC__/tencent_stream_sdk/img/kick.png" alt="">
                                        {/if}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-div card member-list-box" style="width: 100%;margin-top: 10px;flex: 1;">
                        <!-- 附件列表 -->
                        <div style="line-height: 40px;">附件列表</div>
                        {if !empty($meeting.attachment)}
                        <div class="file_list flex flex-column">
                            {foreach $meeting.attachment as $ak => $attachment}
                            <div class="flex">
                                <div class="attachment" target="_blank" onclick="toAttachment('{$attachment.savepath}')">{$attachment.name}</div>
                            </div>
                            {/foreach}
                        </div>
                        {else/}
                        <div style="height: 156px;color: #bdbaba" class="flex align-center justify-center">
                            暂无附件
                        </div>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 展示不支持webRTC的提示 -->
    <div id="remind-info-container" style="justify-content: center; display: none;">
        <!-- 在ios端webview引导用户打开safari浏览器 -->
        <div id="webview-remind" class="webview-remind">
            <img class="webview-remind-img" src="__PUBLIC__/tencent_stream_sdk/img/right-top-arrow.png" alt="right-top-arrow">
            <div class="webview-remind-info">
                <span>点击右上角 ··· 图标</span>
                <span style="display: inline-block; margin-top: 10px;">选择在safari浏览器中打开</span>
            </div>
        </div>
        <!-- 提醒用户用可以使用的浏览器打开 -->
        <div id="browser-remind" class="browser-remind">
            <div id="remind-icon" style="width: 100%; font-size: 28px;">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-warn"></use>
                </svg>
                <span style="display: inline-block; margin-left: 5px">提示</span>
            </div>
            <div id="remind-info" class="remind-info"></div>
        </div>
    </div>
    <script src="__PUBLIC__/tencent_stream_sdk/js/jquery-3.2.1.min.js"></script>
<!--    <script src="__PUBLIC__/plugins/layer/layer.js"></script>-->
    <script src="__PUBLIC__/plugins/layui/layui.all.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/popper.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/bootstrap-material-design.js"></script>
    <script>
        const site_url = '{$site_url}';
        const is_share = '{$config.is_share}';
        const sdkAppId2 = '{$config.sdk_app_id}';
        let is_admin = '{$is_admin}';
        let userSig2 = '{$userSig}';
        let shareSig = '{$shareSig}';

        $(document).ready(function () {
            $('body').bootstrapMaterialDesign();

            let layer = null
            layui.use('layer', function(){
                layer = layui.layer;
            });
        });
        function toAttachment(url){
            //屏幕分享开启状态 打开下载链接 否则预览文件到指定区域
            if(is_share == 1){
                window.open(url);
            }else{
                $('#main-video').hide()
                $('#main-iframe').show()
                // 判断url是否文档或表格
                if(url.indexOf('.doc') != -1 || url.indexOf('.docx') != -1 || url.indexOf('.xlsx') != -1|| url.indexOf('.docx') != -1 || url.indexOf('.ppt') != -1){
                    $('#main-iframe').attr('src', 'https://view.officeapps.live.com/op/view.aspx?src='+site_url+url)
                }else if(url.indexOf('.pdf') != -1){
                    //预留pdf预览
                    $('#main-iframe').attr('src', site_url+url)
                }else{
                    //其他，预计都是图片
                    $('#main-iframe').attr('src', site_url+url)
                }
                // window.frames["main-iframe"].location.href='http://view.officeapps.live.com/op/view.aspx?src='+'https://gwdj.71cms.net/uploads/20220928/767fd9cec8498f6fab61116c655bd472.xlsx'
                // window.frames["main-iframe"].location.href='http://view.officeapps.live.com/op/view.aspx?src='+'https://gwdj.71cms.net/uploads/20220928/358a1884530b626761d6bc465493bdd8.docx'
                // window.frames["main-iframe"].location.href='https://gwdj.71cms.net/uploads/20220928/06defdca309fcae782353df3675e1788.pdf'
                // window.frames["main-iframe"].location.href='https://gwdj.71cms.net/uploads/20220928/e43431416fba096a7d788ce82dba3791.png'
            }
        }
    </script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/lib-generate-test-usersig.min.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/debug/GenerateTestUserSig.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/iconfont.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/trtc.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/common.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/rtc-client.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/share-client.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/presetting.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/rtc-detection.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/device-testing.js"></script>
    <script src="__PUBLIC__/tencent_stream_sdk/js/index.js"></script>
</body>

</html>